/**
 * 图片上传和处理相关功能
 */
document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const previewItems = document.querySelectorAll('.preview-item');
    const uploadBox = document.getElementById('bgUploadBox');
    const photoInput = document.getElementById('photoInput');
    const previewBox = document.querySelector('.preview-box');
    const previewImage = document.getElementById('previewImage');
    const resetBtn = document.getElementById('resetBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const colorBtns = document.querySelectorAll('.color-btn');
    const loadingOverlay = document.querySelector('.loading-overlay');
    const customBgBtn = document.getElementById('customBgBtn');
    const customBgInput = document.getElementById('customBgInput');

    if (!uploadBox) return; // 如果元素不存在，终止执行
    
    // 点击预览样例
    if (previewItems) {
        previewItems.forEach(item => {
            item.addEventListener('click', () => {
                const imgSrc = item.querySelector('img').src;
                console.log('查看效果预览:', imgSrc);
                // 此处可以实现点击预览样例后的操作，如显示大图等
            });
        });
    }

    // 点击上传框激活文件选择
    uploadBox.addEventListener('click', () => {
        photoInput.click();
    });

    // 拖拽上传相关事件
    uploadBox.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadBox.classList.add('drag-over');
    });

    uploadBox.addEventListener('dragleave', () => {
        uploadBox.classList.remove('drag-over');
    });

    uploadBox.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadBox.classList.remove('drag-over');
        const file = e.dataTransfer.files[0];
        handleImageUpload(file);
    });

    // 点击上传
    photoInput.addEventListener('change', () => {
        const file = photoInput.files[0];
        handleImageUpload(file);
    });

    // /**
    //  * 处理图片上传
    //  * @param {File} file - 上传的图片文件
    //  */
    // function handleImageUpload(file) {
    //     if (!file || !file.type.startsWith('image/')) {
    //         alert('请上传有效的图片文件！');
    //         return;
    //     }
    //
    //     // 显示加载动画
    //     loadingOverlay.classList.remove('hidden');
    //
    //     const reader = new FileReader();
    //     reader.onload = (e) => {
    //         previewImage.src = e.target.result;
    //         uploadBox.classList.add('hidden');
    //         previewBox.classList.remove('hidden');
    //
    //         // 模拟处理延迟
    //         setTimeout(() => {
    //             loadingOverlay.classList.add('hidden');
    //         }, 1000);
    //     };
    //     reader.readAsDataURL(file);
    // }
    async function handleImageUpload(file) {
        if (!file || !file.type.startsWith('image/')) {
            alert('请上传有效的图片文件！');
            return;
        }

        // 显示加载动画
        loadingOverlay.classList.remove('hidden');

        try {
            // 创建 FormData 对象上传文件
            const formData = new FormData();
            formData.append('image', file);

            // 从 localStorage 获取用户信息
            const username = localStorage.getItem('username');
            const token = localStorage.getItem('token');

            if (!username || !token) {
                alert('请先登录');
                return;
            }

            // 发送上传请求
            const response = await fetch('http://localhost:5000/api/upload', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                credentials: 'include',
                body: formData
            });

            const data = await response.json();

            if (!data.success) {
                throw new Error(data.message || '上传失败');
            }

            // 预览图片
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImage.src = e.target.result;
                uploadBox.classList.add('hidden');
                previewBox.classList.remove('hidden');
            };
            reader.readAsDataURL(file);

        } catch (error) {
            console.error('上传错误:', error);
            alert('图片上传失败: ' + error.message);
        } finally {
            // 隐藏加载动画
            loadingOverlay.classList.add('hidden');
        }
    }

    // 自定义背景上传
    if (customBgBtn && customBgInput) {
        customBgBtn.addEventListener('click', () => {
            customBgInput.click();
        });

        customBgInput.addEventListener('change', () => {
            const file = customBgInput.files[0];
            if (!file || !file.type.startsWith('image/')) {
                alert('请上传有效的图片文件！');
                return;
            }
            console.log('自定义背景已上传:', file.name);
            // 这里可以进一步处理自定义背景
        });
    }

    // 重置上传
    if (resetBtn) {
        resetBtn.addEventListener('click', () => {
            uploadBox.classList.remove('hidden');
            previewBox.classList.add('hidden');
            photoInput.value = '';
        });
    }

    // 更换背景色
    if (colorBtns) {
        colorBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const color = btn.dataset.color;
                if (previewImage.src) {
                    // 这里添加更换背景色的逻辑
                    console.log('更换背景色为:', color);
                    
                    // 模拟处理中状态
                    loadingOverlay.classList.remove('hidden');
                    setTimeout(() => {
                        // 在实际应用中，这里应该是对图像进行处理
                        // 这里只是简单模拟效果变化
                        console.log('背景色已更改为:', color);
                        loadingOverlay.classList.add('hidden');
                    }, 1000);
                }
            });
        });
    }

    // 下载处理后的图片
    if (downloadBtn) {
        ownloadBtn.addEventListener('click', () => {
            if (!previewImage.src) return;
            const filename = 'processed-photo.jpg';
            // 创建临时链接下载图片
            const link = document.createElement('a');
            link.download = 'processed-photo.jpg';
            link.href = previewImage.src;
            link.click();
            // 添加到历史记录
            if (typeof window.addHistoryRecord === 'function') {
                window.addHistoryRecord('AI换脸', filename);
            }
        });
    }
});